<template>
  <div class="search-form-demo">
    <el-card>
      <template #header>
        <div class="demo-header">
          <span>搜索表单样式演示</span>
          <el-button @click="toggleTheme">
            切换主题 (当前: {{ isDark ? '深色' : '浅色' }})
          </el-button>
        </div>
      </template>

      <!-- 演示搜索表单 -->
      <div class="search-form">
        <div class="search-form-header">
          <h3 class="search-title">
            <el-icon><Search /></el-icon>
            筛选条件演示
          </h3>
          <el-button 
            text 
            type="primary" 
            @click="toggleSearchForm"
            class="toggle-btn"
          >
            {{ searchFormCollapsed ? '展开' : '收起' }}
            <el-icon class="toggle-icon" :class="{ 'is-collapsed': searchFormCollapsed }">
              <ArrowDown />
            </el-icon>
          </el-button>
        </div>
        
        <el-collapse-transition>
          <div v-show="!searchFormCollapsed" class="search-form-content">
            <el-form :model="searchForm" class="search-form-inner">
              <el-row :gutter="16">
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                  <el-form-item label="关键词搜索">
                    <el-input
                      v-model="searchForm.search"
                      placeholder="请输入关键词"
                      clearable
                      prefix-icon="Search"
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                  <el-form-item label="状态">
                    <el-select 
                      v-model="searchForm.status" 
                      placeholder="请选择状态" 
                      clearable 
                      class="search-select"
                    >
                      <el-option label="选项1" value="option1" />
                      <el-option label="选项2" value="option2" />
                      <el-option label="选项3" value="option3" />
                    </el-select>
                  </el-form-item>
                </el-col>
                
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                  <el-form-item label="日期范围">
                    <el-date-picker
                      v-model="searchForm.dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                      class="search-date-picker"
                    />
                  </el-form-item>
                </el-col>
                
                <el-col :xs="24" class="search-actions-col">
                  <el-form-item class="search-actions">
                    <el-button type="primary" @click="handleSearch">
                      <el-icon><Search /></el-icon>
                      搜索
                    </el-button>
                    <el-button @click="handleReset">
                      <el-icon><RefreshLeft /></el-icon>
                      重置
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-transition>
      </div>

      <!-- 结果展示 -->
      <div class="demo-result">
        <h4>搜索结果:</h4>
        <pre>{{ JSON.stringify(searchForm, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, ArrowDown, RefreshLeft } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 响应式数据
const searchFormCollapsed = ref(false)

// 搜索表单
const searchForm = reactive({
  search: '',
  status: '',
  dateRange: [] as string[]
})

// 计算属性
const isDark = computed(() => appStore.isDark)

// 方法
const toggleSearchForm = () => {
  searchFormCollapsed.value = !searchFormCollapsed.value
}

const toggleTheme = () => {
  appStore.toggleTheme()
}

const handleSearch = () => {
  ElMessage.success('搜索功能已触发')
  console.log('搜索参数:', searchForm)
}

const handleReset = () => {
  searchForm.search = ''
  searchForm.status = ''
  searchForm.dateRange = []
  ElMessage.info('表单已重置')
}
</script>

<style lang="scss" scoped>
.search-form-demo {
  .demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search-form {
    margin-bottom: 20px;
    background: var(--bg-color-light);
    border: 1px solid var(--border-color-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--border-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .search-form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: var(--fill-color-light);
      border-bottom: 1px solid var(--border-color-extra-light);

      .search-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color-primary);
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: var(--color-primary);
        }
      }

      .toggle-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-color-regular);
        transition: all 0.3s ease;

        &:hover {
          color: var(--color-primary);
        }

        .toggle-icon {
          transition: transform 0.3s ease;

          &.is-collapsed {
            transform: rotate(-90deg);
          }
        }
      }
    }

    .search-form-content {
      padding: 20px;
    }

    .search-form-inner {
      .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
          color: var(--text-color-regular);
          font-weight: 500;
          margin-bottom: 4px;
        }
      }

      .search-input,
      .search-select,
      .search-date-picker {
        width: 100%;

        :deep(.el-input__wrapper) {
          background-color: var(--input-bg);
          border-color: var(--input-border);
          transition: all 0.3s ease;

          &:hover {
            border-color: var(--input-border-hover);
          }

          &.is-focus {
            border-color: var(--input-border-focus);
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }

        :deep(.el-input__inner) {
          color: var(--text-color-primary);

          &::placeholder {
            color: var(--input-placeholder);
          }
        }
      }

      .search-actions-col {
        margin-top: 8px;
      }

      .search-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;

        .el-button {
          transition: all 0.3s ease;

          &.el-button--primary {
            background: var(--color-primary);
            border-color: var(--color-primary);

            &:hover {
              background: var(--color-primary-light);
              border-color: var(--color-primary-light);
            }
          }

          &.el-button--default {
            background: var(--button-default-bg);
            border-color: var(--button-default-border);
            color: var(--button-default-text);

            &:hover {
              border-color: var(--color-primary);
              color: var(--color-primary);
            }
          }
        }
      }
    }
  }

  .demo-result {
    margin-top: 20px;
    padding: 16px;
    background: var(--fill-color-lighter);
    border-radius: 8px;

    h4 {
      margin: 0 0 12px 0;
      color: var(--text-color-primary);
    }

    pre {
      margin: 0;
      color: var(--text-color-regular);
      font-size: 12px;
      line-height: 1.5;
    }
  }
}
</style>
